<template>
  <div class="nav">
    <van-swipe class="my-swipe" :loop="false" height="84px" >
      <van-swipe-item v-for="(item, index) in Math.ceil(banner.length / 5)">
        <van-grid :column-num="5" :border="false">
          <van-grid-item :icon="subitem.icon" :text="subitem.title"
            v-for="subitem in banner.slice(5 * index, 5 * (index + 1))" />
        </van-grid>
      </van-swipe-item>
      <!-- active代表当前轮播的下标（0,1）  total代表的是轮播的总次数 -->
      <template #indicator="{ active, total }">
        <div class="custom-indicator">
          <span v-for="(item, index) in total" :class="index == active ? 'active' : ''"
            :style="{ width: 100 / total + '%' }"></span>
        </div>
      </template>
    </van-swipe>

  </div>
</template>

<script>
export default {
  props: ['banner']
}
</script>

<style scoped lang="less">
.nav{
  height: 96px;
  padding: 6px;
  background: linear-gradient(#FF5555, #f2eded);
}
.my-swipe{
  border-radius: 15px;
}
.custom-indicator {
  position: absolute;
  right: 0px;
  bottom: 4px;
  left: 0;
  margin: auto;
  font-size: 12px;
  width: 20px;
  background: rgba(0, 0, 0, 0.1);
  display: flex;

  span {
    height: 8px;
  }

  span.active {
    background: red;
  }
}
</style>